import { useCallback, useContext, useEffect } from 'react';
import { Form, Row, Col, Input, Select, InputNumber, Empty } from 'antd';

import { DesignerContext } from '../DesignerHooks';
import { ColorPicker } from './ColorPicker';

import cls from 'classnames';
import './styles.less';

const appearanceArray = [
  {
    key: 'iconColor',
    name: '图标颜色',
  },
  {
    key: 'fontColor',
    name: '字体颜色',
  },
  {
    key: 'strokeStyle',
    name: '边线颜色',
  },
  {
    key: 'fillStyle',
    name: '节点颜色',
  },
];

const { Option } = Select;

const formLayout = {
  wrapperCol: {
    span: 16,
  },
  labelCol: {
    span: 8,
  },
};

export const Appearance = () => {
  const clsName = 'design-collapse-box';

  const [nodeForm] = Form.useForm();
  const [lineForm] = Form.useForm();

  const context = useContext(DesignerContext);

  useEffect(() => {
    if (context?.targetNode?.node) {
      let { node } = context.targetNode;
      nodeForm.setFieldsValue({
        iconColor: node?.iconColor,
        fontColor: node?.fontColor,
        strokeStyle: node?.strokeStyle,
        fillStyle: node?.fillStyle,
      });
    }
  }, [context?.targetNode?.node]);

  useEffect(() => {
    if (context?.targetNode?.line) {
      let { line } = context.targetNode;
      lineForm.setFieldsValue({
        strokeStyle: line?.strokeStyle,
        name: line?.name,
        dash: line?.dash,
        lineWidth: line?.lineWidth,
        fromArrow: line?.fromArrow,
        toArrow: line?.toArrow,
      });
    }
  }, [context?.targetNode?.line]);

  const onNodeChange = useCallback((t, a) => {
    context?.updateNode(t);
  }, []);

  const onLineChange = useCallback((t, a) => {
    context?.updateLine(t);
  }, []);

  return (
    <div className={cls(clsName)}>
      {context?.targetNode?.node && (
        <Form form={nodeForm} onValuesChange={onNodeChange} {...formLayout}>
          {appearanceArray.map((item) => {
            return (
              <Form.Item key={item.key} name={item.key} label={item.name}>
                <ColorPicker />
              </Form.Item>
            );
          })}
        </Form>
      )}
      {context?.targetNode?.line && (
        <Form form={lineForm} onValuesChange={onLineChange} {...formLayout}>
          <Row gutter={[8, 8]}>
            <Col span={24}>
              <Form.Item label="线条颜色" name="strokeStyle">
                <Input type="color" />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="线条类型" name="name">
                <Select>
                  <Option value="curve">贝塞尔曲线</Option>
                  <Option value="polyline">折线</Option>
                  <Option value="line">直线</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="线条样式" name="dash">
                <Select>
                  <Option value={0}>_________</Option>
                  <Option value={1}>---------</Option>
                  <Option value={2}>_ _ _ _ _</Option>
                  <Option value={3}>- . - . - .</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="线条宽度" name="lineWidth">
                <InputNumber style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="起点箭头" name="fromArrow">
                <Select>
                  <Option value="">无箭头</Option>
                  <Option value="triangleSolid">实心三角形</Option>
                  <Option value="triangle">空心三角形</Option>
                  <Option value="diamondSolid">实心菱形</Option>
                  <Option value="diamond">空心菱形</Option>
                  <Option value="circleSolid">实心圆</Option>
                  <Option value="circle">空心圆</Option>
                  <Option value="line">线型箭头</Option>
                  <Option value="lineUp">上单边线箭头</Option>
                  <Option value="lineDown">下单边线箭头</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="结束箭头" name="toArrow">
                <Select>
                  <Option value="">无箭头</Option>
                  <Option value="triangleSolid">实心三角形</Option>
                  <Option value="triangle">空心三角形</Option>
                  <Option value="diamondSolid">实心菱形</Option>
                  <Option value="diamond">空心菱形</Option>
                  <Option value="circleSolid">实心圆</Option>
                  <Option value="circle">空心圆</Option>
                  <Option value="line">线型箭头</Option>
                  <Option value="lineUp">上单边线箭头</Option>
                  <Option value="lineDown">下单边线箭头</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      )}

      {!context?.targetNode?.node && !context?.targetNode?.line && (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description="暂无选中节点或线"
        />
      )}
    </div>
  );
};
